<template>
  <div class="comment-list">
    <!-- 评论列表 -->
    <!-- van-list 默认是 只有在页面可视窗口范围内才可以触发load事件 -->
    <!-- 如果文章太长，页面已进入不会自动触发load事件，所以需要在created主动调用一次 -->
    <!-- :immediate-check="false" 关闭主动位置检测，是否触发load事件，默认为true -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <comment-item 
        v-for="(item,index) in list" 
        :key="index"  
        :comment-info="item"
        @click-reply="$emit('click-reply',$event)"
      />
    </van-list>
    <!-- 评论列表 -->
  
  </div>
</template>

<script>
import { getComments } from '@/api/comment'
import commentItem from './comment-item.vue';
  export default {
    components: { commentItem },
    name: "CommentList",
    data() {
      return {
        // list: [], // 评论列表
        loading: false, // 上拉加载更多的 loading
        finished: false, // 是否加载结束
        limit:10, // 每页数量
        offset:null // 页码偏移量
      };
    },
    props:{
      // 接收文章ID，或者评论ID
      sourceId:{
          type:[Number,String,Object],
          required:true
      },
      list:{
        type:Array,
        required:true
      },
      type:{
        type:String,
        default:'a'
      }
    },
    created () {
      // 主动显示loading状态
      this.loading = true 
      // 主动加载一次数据
      this.onLoad()
    },
    methods: {
      async onLoad () {
        try {
          // 1.发送请求
          // 获取文章的评论列表和 获取评论的回复列表是一个接口
          let {data:res} = await getComments({
            type:this.type,  // a获取文章的评论，c获取评论的回复
            // 【注意】:要对文章ID执行toString，否则会带上双引号，导致地址错误
            source:this.sourceId.toString(), // 文章的ID，评论的ID  
            offset:this.offset,  // 偏移量
            limit:this.limit  // 每页数量
          })
          // 2.追加数据
          this.list.push(...res.data.results)
          // 设置评论总数
          this.$emit('set-comment-total',res.data.total_count)
          // 3.关闭loading
          this.loading = false
          // 4.判断结束
          if(res.data.results.length<this.limit){
            this.finished = true
          }
          // 5.页码变化
          this.offset = res.data.last_id
        } catch (error) {
          this.loading = false
          this.$toast.fail('获取评论失败')
        }
      }
    }
  };
</script>

<style scoped lang="less">
  .publish-wrap {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
  }

  .van-list {
    margin-bottom: 45px;
  }
</style>